<template>
  <div class="user-profile">
    <!-- 顶部标题 -->
    <div class="header">益起行</div>

    <!-- 头像部分 -->
    <div class="avatar-container">
      <van-image
        :src="user.avatar"
        width="20vh"
        height="20vh"
        fit="cover"
        round
        class="avatar"
      />
    </div>

    <!-- 姓名部分 -->
    <van-cell title="姓名" :value="user.name" class="info-cell" />

    <!-- 学号部分 -->
    <van-cell title="学号" :value="user.studentId" class="info-cell" />

    <!-- 学院部分 -->
    <van-cell title="学院" :value="user.faculty" class="info-cell" />

    <!-- 志愿时长部分 -->
    <van-cell title="志愿时长" :value="user.volunteerHours" class="info-cell" />

    <!-- 修改个人资料 -->
    <van-cell
      clickable
      @click="goToEditProfile"
      title="修改个人资料"
      center
      is-link
      class="edit-profile-cell"
    />

    <!-- 退出登录 -->
    <van-cell
      clickable
      @click="logout"
      class="logout-cell"
    >
      <template #title>
        <svg
          xmlns="http://www.w3.org/2000/svg"
          class="quit-icon"
          viewBox="0 0 24 24"
          fill="currentColor"
        >
          <path d="M16 12L13 15V9L16 12ZM5 4H11V6H5V18H11V20H5C3.89 20 3 19.1 3 18V6C3 4.89 3.89 4 5 4ZM21 12L13 19V16H9V8H13V5L21 12Z" />
        </svg>
      </template>
    </van-cell>
  </div>
</template>

<script>
import { Cell, CellGroup, Image } from "vant"; // 引入 Vant 组件
import userProfileApi from "@/api/userProfile.js";

export default {
  components: {
    "van-cell": Cell,
    "van-cell-group": CellGroup,
    "van-image": Image,
  },
  data() {
    return {
      user: {
        avatar: "", // 用户头像
        name: "", // 用户姓名
        studentId: "", // 学号
        faculty: "", // 学院
        volunteerHours: 0, // 志愿时长
      },
    };
  },
  methods: {
    // 获取用户资料
    fetchUserProfile() {
      userProfileApi
        .getUserBasicProfile()
        .then((res) => {
          this.user.avatar =
            res.pic ||
            "https://volunteersystem.oss-cn-beijing.aliyuncs.com/default.jpeg"; // 如果没有头像，使用默认头像
          this.user.name = res.name || "未设置";
          this.user.studentId = res.studentId || "未设置";
          this.user.faculty = res.faculty || "未设置";
          this.user.volunteerHours = res.hours || 0;
        })
        .catch((err) => {
          console.log(err);
          this.$toast.fail(err.message || "获取个人资料失败");
        });
    },
    // 跳转到修改个人资料页面
    goToEditProfile() {
      this.$router.push("/user/edit");
    },
    // 退出登录
    logout() {
      userProfileApi.logout();
      this.$router.push("/"); // 跳转到登录页面
    },
  },
  mounted() {
    this.fetchUserProfile(); // 在页面加载时调用方法获取用户资料
  },
};
</script>

<style scoped>
/* 顶部标题 */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: linear-gradient(to right, #007aff, #4a90e2);
  color: white;
  font-size: 3vh;
  text-align: center;
  padding: 2vh 0;
  font-weight: bold;
  z-index: 10;
  box-sizing: border-box; /* 确保 padding 不增加宽度 */
}

/* 页面容器 */
.user-profile {
  padding: 10vh 5% 25%; /* 距顶部标题的间距 */
  max-width: 90%;
  margin: 0 auto;
  background: #f8f9fa; 
}

/* 头像部分 */
.avatar-container {
  display: flex;
  justify-content: center;
  margin-bottom: 4vh;
}



/* 单元格部分 */
.info-cell .van-cell__title {
  color: #333;
  font-size: 2.5vh;
}

.info-cell .van-cell__value {
  color: #666;
  font-size: 2.5vh;
}

/* 修改个人资料 */
.edit-profile-cell {
  background: #f1f8ff;
  color: #007aff;
  border-radius: 1vh;
  margin-top: 2vh;
}

/* 自定义退出登录按钮 */
.logout-cell {
  margin-top: 2vh;
  text-align: center;
}

.quit-icon {
  width: 3vh;
  height: 3vh;
  color: red;
}
</style>